<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.bannerId">
          <a :href="item.href">
            <img style="height:460px;" :src="item.imgPath" width="100%" :alt="item.describes" />
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->

    <div class="main-box">
      <div class="main">
        <!-- 打骨折游戏 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">打骨折游戏</div>
          </div>
          <div class="box-bd">
            <div class="list">
              <MyList :list="gameGoodsList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 打骨折游戏 END -->

        <!-- 打游戏当然需要专业设备喽 -->
        <div class="appliance">
          <div class="box-hd">
            <div class="title">看看周边都在买些什么</div>
          </div>
          <div class="box-bd">
            <div class="list">
              <MyPeriGoodsSaleList :list="periGoodsSaleInfoList" ></MyPeriGoodsSaleList>
            </div>
          </div>
        </div>
        <!-- 打游戏当然需要专业设备喽 -->

        <!-- 看看他们都在聊些什么 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">看看他们都在聊些什么</div>
          </div>
          <div>
            <MyClubArticleList :list="clubArticleList" :isMore="true"></MyClubArticleList>
          </div>
        </div>
        <!-- 看看他们都在聊些什么END -->
      </div>
    </div>
  </div>
</template>
<script>
import periGoodsSale from "@/api/perimall/periGoodsSale";
import gamesGoods from "@/api/game/gamesGoods";
import article from "@/api/club/article";

export default {
  data() {
    return {
      carousel: "", // 轮播图数据
      gameGoodsList: "", // 手机商品列表
      periGoodsSaleInfoList: "", //游戏设备列表
      clubArticleList: "",  //社区文章了列表
      page: 1,
    };
  },

  created() {
    // 获取轮播图数据
    this.getBannerList()
    //获取游戏商品信息
    this.getGameGoodsList()
    //获取周边商品信息
    this.getPeriGoodsISaleInfo()
    //获取社区文章列表信息
    this.getClubArticleList()
  },
  methods: {
    getBannerList() {
      gamesGoods.getBannerInfoList()
      .then(result => {
        this.carousel = result.data;
      })
    },

    getGameGoodsList() {
      gamesGoods.getGameGoodsSaleInfo()
      .then(res => {
        this.gameGoodsList = res.data.list;
      }).catch(err => {
        this.gameGoodsList = {}
      })
    },

    //获取周边商品优惠信息
    getPeriGoodsISaleInfo() {
      periGoodsSale.getPeriGoodsSaleInfo(this.page)
      .then(res => {
        const data = res.data
        if (data != null) {
          this.periGoodsSaleInfoList = data.list
        }else {
          this.periGoodsSaleInfoList = null
        }
      })
    },

    getClubArticleList() {
      article.getArticleInfoList()
      .then(result => {
        this.clubArticleList = result.data.list;
      })
    }
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>